import React, {
  ReactElement,
  useContext,
  useEffect,
  useMemo,
  useRef
} from 'react';
import { View } from 'react-native';

import styles from './style';
import { Store } from '../../../../reducer';
import CurrentTime from '../CurrentTime';
import PlayStatus from '../PlayStatus';
import TotalTime from '../TotalTime';
import Content from '../Content';
import { systemUtil } from '../../../../../../util/native';

const bottomSafeHeight = systemUtil.getBottomSafeAreaHeight();

export default (): ReactElement => {
  const view = useRef<View>(null);

  const { state } = useContext(Store);
  const { showBar } = state;

  useEffect((): void => {
    if (view && view.current) {
      view.current.setNativeProps({
        style: { bottom: showBar ? 0 : -300 }
      });
    }
  }, [showBar]);

  return useMemo((): ReactElement => {
    return (
      <View style={[styles.background]} ref={view}>
        <View style={styles.content}>
          <PlayStatus />
          <CurrentTime />
          <Content />
          <TotalTime />
        </View>
        <View style={{ height: bottomSafeHeight }} />
      </View>
    );
  }, []);
};
